<template>
  <div class="person">
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }} -- {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { defineProps, withDefaults } from "vue";
  import { type Persons } from "@/types";

  //只接收list
  // defineProps(["list"]);

  //接收list + 限制类型
  // defineProps<{ list: Persons }>();

  //接收list + 限制类型 + 限制必要性 + 指定默认值
  withDefaults(defineProps<{ list?: Persons }>(), {
    list: () => [
      { id: "App.vue没给我list", name: "那我就自己给自己", age: 18 },
    ],
  });

  //接收list,同时将props保存起来
  /*let x = defineProps(["list"]);
   console.log(x.list);*/
</script>

<style scoped>
  .person {
    background-color: aqua;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }

  button {
    margin-left: 5px;
    margin-right: 5px;
  }
</style>
